import {designPage} from "@peryl/react-compose";
import {Alert, i18n, PageCard, PageCardContent, PageCardTitle, Plc, PlcExpand, PlcGroup, PlcIndex, Table} from "plain-design";
import {useDemoData} from "../../common/useDemoData";

export const DemoExpand = designPage(() => {

  const demoData = useDemoData('data/data-1.json', {
    formatData: data => {
      return data.map((item) => {
        return {
          ...item,
          children: new Array(Math.ceil(Math.random() * 5 + 2)).fill(null).map((_, index) => {
            return {
              id: index,
              date: item.date,
              name: item.name + `_${index + 1}`,
              address: item.addr,
            };
          })
        };
      });
    }
  });

  return () => (
    <PageCard>
      <PageCardTitle title={i18n.$intl('page.expandList.expandRow1').d("展开行")}>
      </PageCardTitle>
      <PageCardContent>
        <Alert label={i18n.$intl('page.expandList.tip1').d("已经开启行虚拟滚动，包括展开行")}/>
        <Table
          loading={demoData.loading}
          data={demoData.data}
          summaryData={demoData.summaryData}
          virtual
          virtualRowType="realIndex"
          dynamicSize
          showRows={10}
        >
          <PlcIndex/>
          <PlcExpand
            fixedWidth
            v-slots={{
              expand: ({ row }) => {
                return (
                  <div style={{ padding: '20px' }}>
                    <Table data={row.children} showRows="auto" size="small">
                      <Plc title={i18n.$intl('page.expandList.name').d("名称")} field="name"/>
                      <Plc title={i18n.$intl('page.expandList.date').d("日期")} field="date"/>
                      <Plc title={i18n.$intl('page.expandList.addr').d("地址")} field="address"/>
                    </Table>
                  </div>
                );
              }
            }}
          />
          <Plc title={i18n.$intl('page.expandList.id').d('编号')} field={'id'}/>
          <Plc title={i18n.$intl('page.expandList.size').d('大小')} field={'size'}/>
          <PlcGroup title={i18n.$intl('page.expandList.addr').d('地址')} fixed={'left'}>
            <Plc field="date" title={i18n.$intl('page.expandList.date').d("日期")}/>
            <Plc field="color" title={i18n.$intl('page.expandList.color').d("颜色")}/>
          </PlcGroup>
          <Plc title={i18n.$intl('page.expandList.id').d('编号')} field={'id'}/>
          <Plc title={i18n.$intl('page.expandList.star').d('评分')} field={'star'}/>
          <Plc title={i18n.$intl('page.expandList.addr').d('地址')} field={'addr'}/>

          <Plc title={i18n.$intl('page.expandList.name').d("名称")} field={'name'} fixed="right"/>
          <PlcGroup title={i18n.$intl('page.expandList.site').d("站点")} fixed={'right'}>
            <Plc field={'url'} title={i18n.$intl('page.expandList.url').d('链接')}/>
            <Plc field={'domain'} title={i18n.$intl('page.expandList.domain').d('域名')}/>
          </PlcGroup>

          <Plc title={i18n.$intl('page.expandList.protocol').d("协议")} field="protocol"/>
          <Plc title={i18n.$intl('page.expandList.email').d("邮箱")} field="email"/>
          <Plc title={i18n.$intl('page.expandList.ip').d("ip")} field="ip"/>
        </Table>
      </PageCardContent>
    </PageCard>
  );
});


export const DemoExpandVirtualColumn = designPage(() => {

  const demoData = useDemoData('data/data-1.json', {
    formatData: data => {
      return data.map((item) => {
        return {
          ...item,
          children: new Array(Math.ceil(Math.random() * 5 + 2)).fill(null).map((_, index) => {
            return {
              id: index,
              date: item.date,
              name: item.name + `_${index + 1}`,
              address: item.addr,
            };
          })
        };
      });
    }
  });

  return () => (
    <PageCard>
      <PageCardTitle title={i18n.$intl('page.expandList.expandRow2').d("展开行并且开启虚拟列")}></PageCardTitle>
      <PageCardContent>
        <Alert label={i18n.$intl('page.expandList.tip2').d("已经开启行列虚拟滚动，包括展开行")}/>
        <Table
          loading={demoData.loading}
          data={demoData.data}
          summaryData={demoData.summaryData}
          virtual
          showRows={10}
          dynamicSize
          virtualColumn
        >
          <PlcIndex/>
          <PlcExpand
            fixedWidth
            v-slots={{
              expand: ({ row }) => {
                return (
                  <div style={{ padding: '20px' }}>
                    <Table data={row.children} showRows="auto" size="small">
                      <Plc title={i18n.$intl('page.expandList.name').d("名称")} field="name"/>
                      <Plc title={i18n.$intl('page.expandList.date').d("日期")} field="date"/>
                      <Plc title={i18n.$intl('page.expandList.addr').d("地址")} field="address"/>
                    </Table>
                  </div>
                );
              }
            }}
          />
          <Plc title={i18n.$intl('page.expandList.id').d('编号')} field={'id'}/>
          <Plc title={i18n.$intl('page.expandList.size').d('大小')} field={'size'}/>
          <PlcGroup title={i18n.$intl('page.expandList.addr').d('地址')} fixed={'left'}>
            <Plc field="date" title={i18n.$intl('page.expandList.date').d("日期")}/>
            <Plc field="color" title={i18n.$intl('page.expandList.color').d("颜色")}/>
          </PlcGroup>
          <Plc title={i18n.$intl('page.expandList.id').d('编号')} field={'id'}/>
          <Plc title={i18n.$intl('page.expandList.star').d('评分')} field={'star'}/>
          <Plc title={i18n.$intl('page.expandList.addr').d('地址')} field={'addr'}/>

          <Plc title={i18n.$intl('page.expandList.name').d("名称")} field={'name'} fixed="right"/>
          <PlcGroup title={i18n.$intl('page.expandList.site').d("站点")} fixed={'right'}>
            <Plc field={'url'} title={i18n.$intl('page.expandList.url').d('链接')}/>
            <Plc field={'domain'} title={i18n.$intl('page.expandList.domain').d('域名')}/>
          </PlcGroup>

          <Plc title={i18n.$intl('page.expandList.protocol').d("协议")} field="protocol"/>
          <Plc title={i18n.$intl('page.expandList.email').d("邮箱")} field="email"/>
          <Plc title={i18n.$intl('page.expandList.ip').d("ip")} field="ip"/>

          <Plc title={i18n.$intl('page.expandList.url').d('链接')} field={'url'}/>
          <Plc title={i18n.$intl('page.expandList.domain').d('域名')} field={'domain'}/>
          <Plc title={i18n.$intl('page.expandList.protocol').d("协议")} field="protocol"/>
          <Plc title={i18n.$intl('page.expandList.email').d("邮箱")} field="email"/>
          <Plc title={i18n.$intl('page.expandList.ip').d("ip")} field="ip"/>
          <Plc title={i18n.$intl('page.expandList.id').d('编号')} field={'id'}/>
          <Plc title={i18n.$intl('page.expandList.star').d('评分')} field={'star'}/>
          <Plc title={i18n.$intl('page.expandList.addr').d('地址')} field={'addr'}/>

          <Plc title={i18n.$intl('page.expandList.url').d('链接')} field={'url'}/>
          <Plc title={i18n.$intl('page.expandList.domain').d('域名')} field={'domain'}/>
          <Plc title={i18n.$intl('page.expandList.protocol').d("协议")} field="protocol"/>
          <Plc title={i18n.$intl('page.expandList.email').d("邮箱")} field="email"/>
          <Plc title={i18n.$intl('page.expandList.ip').d("ip")} field="ip"/>
          <Plc title={i18n.$intl('page.expandList.id').d('编号')} field={'id'}/>
          <Plc title={i18n.$intl('page.expandList.star').d('评分')} field={'star'}/>
          <Plc title={i18n.$intl('page.expandList.addr').d('地址')} field={'addr'}/>

          <Plc title={i18n.$intl('page.expandList.url').d('链接')} field={'url'}/>
          <Plc title={i18n.$intl('page.expandList.domain').d('域名')} field={'domain'}/>
          <Plc title={i18n.$intl('page.expandList.protocol').d("协议")} field="protocol"/>
          <Plc title={i18n.$intl('page.expandList.email').d("邮箱")} field="email"/>
          <Plc title={i18n.$intl('page.expandList.ip').d("ip")} field="ip"/>
          <Plc title={i18n.$intl('page.expandList.id').d('编号')} field={'id'}/>
          <Plc title={i18n.$intl('page.expandList.star').d('评分')} field={'star'}/>
          <Plc title={i18n.$intl('page.expandList.addr').d('地址')} field={'addr'}/>

          <Plc title={i18n.$intl('page.expandList.url').d('链接')} field={'url'}/>
          <Plc title={i18n.$intl('page.expandList.domain').d('域名')} field={'domain'}/>
          <Plc title={i18n.$intl('page.expandList.protocol').d("协议")} field="protocol"/>
          <Plc title={i18n.$intl('page.expandList.email').d("邮箱")} field="email"/>
          <Plc title={i18n.$intl('page.expandList.ip').d("ip")} field="ip"/>
          <Plc title={i18n.$intl('page.expandList.id').d('编号')} field={'id'}/>
          <Plc title={i18n.$intl('page.expandList.star').d('评分')} field={'star'}/>
          <Plc title={i18n.$intl('page.expandList.addr').d('地址')} field={'addr'}/>

          <Plc title={i18n.$intl('page.expandList.url').d('链接')} field={'url'}/>
          <Plc title={i18n.$intl('page.expandList.domain').d('域名')} field={'domain'}/>
          <Plc title={i18n.$intl('page.expandList.protocol').d("协议")} field="protocol"/>
          <Plc title={i18n.$intl('page.expandList.email').d("邮箱")} field="email"/>
          <Plc title={i18n.$intl('page.expandList.ip').d("ip")} field="ip"/>
          <Plc title={i18n.$intl('page.expandList.id').d('编号')} field={'id'}/>
          <Plc title={i18n.$intl('page.expandList.star').d('评分')} field={'star'}/>
          <Plc title={i18n.$intl('page.expandList.addr').d('地址')} field={'addr'}/>

          <Plc title={i18n.$intl('page.expandList.url').d('链接')} field={'url'}/>
          <Plc title={i18n.$intl('page.expandList.domain').d('域名')} field={'domain'}/>
          <Plc title={i18n.$intl('page.expandList.protocol').d("协议")} field="protocol"/>
          <Plc title={i18n.$intl('page.expandList.email').d("邮箱")} field="email"/>
          <Plc title={i18n.$intl('page.expandList.ip').d("ip")} field="ip"/>
          <Plc title={i18n.$intl('page.expandList.id').d('编号')} field={'id'}/>
          <Plc title={i18n.$intl('page.expandList.star').d('评分')} field={'star'}/>
          <Plc title={i18n.$intl('page.expandList.addr').d('地址')} field={'addr'}/>
        </Table>
      </PageCardContent>
    </PageCard>
  );
});

export default designPage(() => {
  return () => <>
    <DemoExpand/>
    <DemoExpandVirtualColumn/>
  </>;
});
